<template>
  <div>
    <el-dialog
      append-to-body
      title="上传附件"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%"
      @close="closeDialog"
    >
      <el-form ref="form" :model="form" size="small" label-width="100px">
        <el-form-item label="附件密级：" required>
          <el-select v-model="form.level" placeholder="请选择" style="width: 150px">
            <el-option v-for="item in fileLevelList" :key="item.codeValue" :label="item.name" :value="item.codeValue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="fl mr10"
            ref="upload"
            :accept="myUploadObj.accept"
            :limit="myUploadObj.limit"
            :multiple="myUploadObj.limit != 1"
            :action="actionUrl"
            :disabled="!form.level"
            :http-request="uploadFile"
            :file-list="fileList"
            :show-file-list="myUploadObj.limit != 1"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
          >
            <el-button v-if="myUploadObj.limit != 1" type="primary" size="small" :disabled="!form.level"
              >选择文件</el-button
            >
            <el-button v-else type="primary" size="small" :disabled="!form.level">上传附件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <div class="wf-dialog-footer text-center">
        <slot name="action">
          <el-button type="primary" size="small" @click="dialogVisible = false">取消</el-button>
          <el-button
            v-if="myUploadObj.limit != 1"
            type="primary"
            size="small"
            :disabled="!fileList.length"
            @click="submit"
            >上 传</el-button
          >
        </slot>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    uploadObj: {
      type: Object,
      default: function() {
        return {
          accept: '',
          limit: 0,
        }
      },
    },
    fileLevelList: {
      type: Array,
    },
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        level: '',
      },
      uploadConfig: {
        headers: {
          Authorization: this.$state['AUTH_SIGN'],
          // Authorization: localStorage.getItem(global.global_Authorization),
        },
      },
      myUploadObj: this.uploadObj,
      // uploadMbFile: '/mb/uploadMbFile', //单个文件上传加标
      // uploadBatchMbFile: '/mb/uploadBatchMbFile', //多个文件上传加标
      fileList: [],
    }
  },
  computed: {
    actionUrl() {
      let url
      if (this.myUploadObj.limit == 1) {
        url = this.$api.uploadMbFile
      } else {
        url = this.$api.uploadBatchMbFile
      }
      return this.$config.server + url + `?level=${this.form.level}`
      // return process.env.VUE_APP_BASEURL_API + url + `?level=${this.form.level}`
    },
  },
  methods: {
    uploadFile(file) {
      this.fileList.push(file.file)
      if (this.myUploadObj.limit == 1) {
        this.submit()
      }
    },
    beforeUpload(file) {
      if (this.myUploadObj.accept == '.wps') {
        const fileName = file.name.split('.')
        const suffix = fileName[fileName.length - 1]
        if (suffix === 'wps') {
          return true
        } else {
          this.$message.error({
            message: '只支持wps文件',
          })
          return false
        }
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    submit() {
      const formData = new FormData()
      this.fileList.forEach(file => {
        formData.append('file', file)
      })
      axios.post(this.actionUrl, formData, this.uploadConfig).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.$message.success('上传成功')
          const list = []
          this.fileList.forEach((item, index) => {
            const listItem = {}
            listItem.fileMijiCode = this.form.level
            listItem.fileName = item.name
            listItem.fileId = data.data[index]
            list.push(listItem)
          })
          this.$emit('toparent', list)
        } else {
          this.$message.error('上传失败')
          this.$emit('toparent')
        }
      })
    },
    closeDialog() {
      this.$refs.upload.clearFiles()
      this.form.level = ''
      this.fileList = []
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload {
  display: inline;
  text-align: center;
  cursor: pointer;
  outline: 0;
}

::v-deep .el-upload-list__item.is-ready {
  display: none;
}
::v-deep .upload-demo {
  display: inline;
}
.wf-dialog-footer {
  margin-top: 80px;
}
</style>
